<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:set var="path" value="${pageContext.request.contextPath }"/>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Family账本 - 编辑账本@${username }</title>
		<link rel="shortcut icon" href="${path }/static/img/账本logo.png">
		<link href="${path }/static/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
	    <link href="${path }/static/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
	    <link href="${path }/static/css/animate.min.css" rel="stylesheet">
	    <link href="${path }/static/css/style.min862f.css?v=4.1.0" rel="stylesheet">
	    
	</head>
	<body style="background-repeat: no-repeat;background-image: url('${path }/static/img/2017年 Bing官方主题第三波 宽屏壁纸(壁纸4).jpg');">
	<div class="col-sm-3"></div>
	<div class="col-sm-6" style="max-width: 500px; position: absolute;top:50%;left: 50%;margin-left:-250px;margin-top:-300px;">
		<div class="ibox float-e-margins">
			<div class="ibox-title">
				<h5>记 账</h5>
			</div>
			<div class="ibox-content">
				<form class="form-horizontal m-t" id="signupForm" method="post" action="${path }/DoUpdateAccount" >
					<input name = "id" hidden="true" value = "${id }">
					<input name = "family_id" hidden="true" value = "${family_id }">
					<input name = "member_id" hidden="true" value = "${member_id }">
					<input name = "text" hidden="true" value = "${text}">
					<div class="form-group">
						<label class="col-sm-3 control-label">用户名：</label>
						<div class="col-sm-8">
							<input id="username" name="username" readonly="readonly" class="form-control" type="text" value="${username }"> 
							<span class="help-block m-b-none">
								<i class="fa fa-info-circle"></i> 不能改
							</span>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-3 control-label">类型：</label>
						<div class="col-sm-8">
							<strong>收入</strong>&nbsp;<input id = "state1" name="state"  type="radio" value = "收入" onclick="doclick()" aria-required="true" aria-invalid="false" class="valid">
							<strong>支出</strong>&nbsp;<input id = "state2" name="state" type="radio" value = "支出" onclick="doclick()" aria-required="true" aria-invalid="false" class="valid">
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-3 control-label">标签：</label>
						<div class="col-sm-8">
							<select id = "label" name = "label" class="form-control m-b">
							      <option value="吃喝">吃喝</option>
							      <option value="娱乐">娱乐</option>
							      <option value="购物">购物</option>
							      <option value="电子产品">电子产品</option>
							      <option value="化妆护肤">化妆护肤</option>
							      <option value="医疗">医疗</option>
							      <option value="交通">交通</option>
							      <option value="学习">学习</option>
							 </select>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-3 control-label">备注：</label>
						<div class="col-sm-8">
							<textarea id="statue" name="statue" rows="3" cols="7" onkeyup="words_deal()"  class="form-control" aria-required="true" style="resize: none;">${statue }</textarea>
							<span class="help-block m-b-none">
								<i class="fa fa-info-circle"></i> 你只能输入三十个字
							</span>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-3 control-label">金额：</label>
						<div class="col-sm-8">
							<input required id="money" name="money" value="${money }" aria-required="true" class="form-control" type="text">
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-3 control-label">日期：</label>
						<div class="col-sm-8">
							<div class="input-group">
								<input required name = "date" value="${date }" class="laydate-icon form-control layer-date" placeholder="YYYY-MM-DD" onclick="laydate({istime: true, format: 'YYYY-MM-DD'})">
							</div>
						</div>
					</div>
					<div class="form-group">
						<div class="col-sm-8 col-sm-offset-3">
							<button class="btn btn-primary" type="submit">提交</button>
							<button class="btn btn-danger" onclick = "javascript:history.back(-1);">返回</button>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
	<div class="col-sm-3"></div>

	<script src="${path }/static/js/jquery.min.js?v=2.1.4"></script>
    <script src="${path }/static/js/bootstrap.min.js?v=3.3.6"></script>
    <!-- <script src="${path }/static/js/content.min.js?v=1.0.0"></script> -->
    <script src="${path }/static/js/plugins/validate/jquery.validate.min.js"></script>
    <script src="${path }/static/js/plugins/validate/messages_zh.min.js"></script>
    <script src="${path }/static/js/demo/form-validate-demo.min.js"></script>
    
    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
	<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
	<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
    
	<script>
	
		//设置标签默认选择
		(function imgload(){
			var a;
			if("${state}" == "收入") {
				document.getElementById('state1').checked=true;
				a = document.getElementById('state1');
			}else {
				document.getElementById('state2').checked=true;
				a = document.getElementById('state2');
			}
			
			var select = document.getElementById("label")
			if (a.value == "收入") {
				select.options.length = 0;
				select.options.add(new Option("工资", "工资"));
				select.options.add(new Option("兼职", "兼职"));
				select.options.add(new Option("投资", "投资"));
				select.options.add(new Option("红包", "红包"));
				select.options.add(new Option("其他", "其他"));
			} else if (a.value == "支出") {
				select.options.length = 0;
				select.options.add(new Option("吃喝", "吃喝"));
				select.options.add(new Option("娱乐", "娱乐"));
				select.options.add(new Option("购物", "购物"));
				select.options.add(new Option("电子产品", "电子产品"));
				select.options.add(new Option("化妆护肤", "化妆护肤"));
				select.options.add(new Option("医疗", "医疗"));
				select.options.add(new Option("交通", "交通"));
				select.options.add(new Option("学习", "学习"));
			}
			document.getElementById("label").value="${label}";
		})();
		
		
		//statue文本域字数限制
		function words_deal() {
			var curLength=$("#statue").val().length; 
			if (curLength > 30) {
				var num = $("#statue").val().substr(0, 30);
				$("#statue").val(num);
			} else {
				//$("#textCount").text(5 - $("#TextArea1").val().length);
			}
		}

		function doclick() {
			var a = event.srcElement;
			var select = document.getElementById("label")
			if (a.value == "收入") {
				select.options.length = 0;
				select.options.add(new Option("工资", "工资"));
				select.options.add(new Option("兼职", "兼职"));
				select.options.add(new Option("投资", "投资"));
				select.options.add(new Option("红包", "红包"));
				select.options.add(new Option("其他", "其他"));
			} else if (a.value == "支出") {
				select.options.length = 0;
				select.options.add(new Option("吃喝", "吃喝"));
				select.options.add(new Option("娱乐", "娱乐"));
				select.options.add(new Option("购物", "购物"));
				select.options.add(new Option("电子产品", "电子产品"));
				select.options.add(new Option("化妆护肤", "化妆护肤"));
				select.options.add(new Option("医疗", "医疗"));
				select.options.add(new Option("交通", "交通"));
				select.options.add(new Option("学习", "学习"));
			}
		}
	</script>
    <script src="${path }/static/js/plugins/layer/laydate/laydate.js"></script>
    <script type="text/javascript" src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>
	</body>
</html>